<template>
    <div class="myBig">
        <el-row :gutter="20">
            <el-col >
                <div class="myCon1">
                    <div class="myechartFirst1">
                        <div class="myLeft1">
                        <img src="../../../assets/imgx/title-1.png" alt="" />
                        <span class="mySpan1">每天总产量</span>
                        </div>
                        <!-- <div class="mySerch">
                            <input type="text" placeholder="输入时间" class="myInput1" v-model="startTime">-
                            <input type="text" placeholder="输入时间" class="myInput2" v-model="endTime"><button class="mybutton1" @click="countRecordCapacitys"> <img src="../../../assets/icon/serch-1.png" alt=""><span>搜索</span></button>
                        </div> -->
                        <div class="mySerch">
                            <!-- <el-date-picker
                                v-model="value1"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker> -->
                            <el-date-picker
                            v-model="value3"
                            type="date"
                            placeholder="选择日期"
                            value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker>&nbsp;--&nbsp;
                            <el-date-picker
                            v-model="value4"
                            type="date"
                            placeholder="选择日期"
                            value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker>
                            <button class="mybutton1" @click="countRecordCapacitys"> <img src="../../../assets/icon/serch-1.png" alt=""><span>搜索</span></button>
                        </div>
                    </div>
                    <div
                        class="echart1"
                        ref="mychart1"
                        id="mychart1"
                        :style="{ float: 'left', width: '100%', height: '300px' }"
                    ></div>
                </div>
            </el-col>

        </el-row>
        <el-row :gutter="20">
            <el-col >
                <div class="myCon2">
                    <div class="myechartFirst2">
                        <div class="myLeft2">
                        <img src="../../../assets/imgx/title-1.png" alt="" />
                        <span class="mySpan2">每个班次每天产量</span>
                        </div>
                        <!-- <div class="mySerch">
                            <input type="text" placeholder="输入时间" class="myInput1" v-model="startTime1">-
                            <input type="text" placeholder="输入时间" class="myInput2" v-model="endTime1"><button class="mybutton1" @click="countWorkforceRecordCapacitys"> <img src="../../../assets/icon/serch-1.png" alt=""><span>搜索</span></button>
                        </div> -->
                        <div class="mySerch">
                            <!-- <el-date-picker
                                v-model="value2"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker> -->
                            <el-date-picker
                            v-model="value5"
                            type="date"
                            placeholder="选择日期"
                            value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker>&nbsp;--&nbsp;
                            <el-date-picker
                            v-model="value6"
                            type="date"
                            placeholder="选择日期"
                            value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker>
                            <button class="mybutton1" @click="countWorkforceRecordCapacitys"> <img src="../../../assets/icon/serch-1.png" alt=""><span>搜索</span></button>
                        </div>
                    </div>
                    <div
                        class="echart2"
                        ref="mychart2"
                        
                        :style="{ float: 'left', width: '100%', height: '300px' }"
                    ></div>
                </div>
                </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from "echarts";
import{ countRecordCapacitys, countWorkforceRecordCapacitys } from '@/api/ProductionStatisticsApi/index'
    export default {
        data(){
            return{
                startTime:'',
                endTime:'',
                timeMessageCn:[],//暂存X轴时间
                mydata1:[],
                arr1 : [],
                name1:'',
                name2:'',
                name3:'',
                value1:'',
                value3:'',
                value4:'',
                option1 :{
                    grid: {
                    borderWidth: 1,
                    left: "7%",
                    top: "10%",
                    right: "5%",
                    bottom: "10%"
                    },
                    textStyle:{
                        color:"#E9EFFF ",
                        fontStyle:'normal',
                        fontSize: 12
                    },
                    /* 横轴 */
                    xAxis: {
                        /* 横轴为类别 */
                        type: 'category',
                        data: ['1', '2', '3', '4', '5','6','7','8', '9', '10', 
                        '11', '12','13','14','15', '16', '17', '18', '19','20',
                        '21', '22', '23', '24', '25','26','27','28','29','30']
                    },
                    yAxis: {
                        /* 纵轴为数据 */
                        type: 'value',
                        splitLine: {
                        show: true,
                            lineStyle: {
                            type: "dashed",
                            color: "#155DAD",
                            opacity: 0.5,
                            },
                        },
                    },
                     /* 数据系列 */
            series: [{
                /* data值长度必须对应x轴长度 */
                data: [],
                /* 折线图 */
                type: 'line',
                /* 是否添加平滑效果，不书写则默认不平滑*/
                smooth:true,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                            {
                                offset: 0,
                                color: "RGB(34,79,140,1)",
                            },
                            {
                                offset: 1,
                                color: "RGB(34,79,140,0)",
                            },
                            ],
                            false
                        ),
                        },
                },
                //
                showSymbol: true, // 只有在 tooltip hover 的时候显示symbol
                Symbol: false,

                
                lineStyle: { // 线条样式
                    normal: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(24, 78, 10, 0.8, [ // 颜色渐变
                        {
                        offset: 0,
                        color: '#0184ea'
                        },
                        {
                        offset: 0.2,
                        color: 'rgb(1, 255, 255, 20)'
                        },
                        {
                        offset: 0.4,
                        color: 'rgb(0, 200, 255, 40)'
                        },
                        {
                        offset: 0.6,
                        color: 'rgb(0, 200, 200, 30)'
                        },
                        {
                        offset: 0.8,
                        color: 'rgb(0, 0, 255, 40)'
                        },
                        {
                        offset: 1,
                        color: 'rgb(0, 255, 255, 0)'
                        }
                    ])
                    // color:{
                    //     type:"linear",
                    //     x:0,
                    //     y:1,
                    //     x2:1,
                    //     y2:0,
                    //     // color: '#0184ea',
                    //     colorStops:[
                    //         {
                    //             offset: 0,
                    //             color: '#0184ea'
                    //         },
                    //         {
                    //             offset: 0.5,
                    //             color: '#0184ea'
                    //         },
                    //         {
                    //             offset: 0.6,
                    //             color: '#0184ea'
                    //         },
                    //         {
                    //             offset: 0,
                    //             color: '#0184ea'
                    //         },
                    //     ]
                    // }
                    }
                }

            }]
                },


                //第二个图
                arr2:[],//暂存y轴数据
                arr3:[],//暂存y轴夜班数据
                arr4:[],//暂存y轴第三个班次数据
                legend1:[],//暂存
                exceptMessageCn:[],//暂存x轴数据
                max:[],
                startTime1:'',
                endTime1:'',
                value2:'',
                value5:'',
                value6:'',
                option2:{
                    grid: {
                    borderWidth: 1,
                    left: "7%",
                    top: "10%",
                    right: "5%",
                    bottom: "10%"
                    },
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    textStyle:{
                        color:"#E9EFFF ",
                        fontStyle:'normal',
                        fontSize: 12
                    },
                    xAxis: {
                        type: 'category',
                        data: ['2023-09-09','2023-09-10','2023-09-11']
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: true,
                                lineStyle: {
                                type: "dashed",
                                color: "#155DAD",
                                opacity: 0.2,
                                },
                        },
                    },
                    legend: {
                        data: ['a', 'b','c'],
                        type: "plain",
                        align:'auto',
                        textStyle:{
                            color:'#fff',
                        }
                    },
                    series: [
                    {
                        name: 'a',
                        data: [],
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        barWidth: "10",
                        itemStyle: {
                            normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                {
                                    offset: 0,
                                    color: "#00A8FF", // 0% 处的颜色
                                },
                                {
                                    offset: 0.98,
                                    color: " #0F3352", // 100% 处的颜色
                                },
                                ],
                                false
                            ),
                            shadowColor: "rgba(5, 213, 255, 1)",
                            shadowBlur: 4,
                            },
                        },
                    },
                
                    {
                        name: 'b',
                        data: [],
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        barWidth: "10",
                        itemStyle: {
                            normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                {
                                    offset: 0,
                                    color: "#15DBCB", // 0% 处的颜色
                                },
                                {
                                    offset: 0.98,
                                    color: "#0F3352", // 100% 处的颜色
                                },
                                ],
                                false
                            ),
                            shadowColor: "rgba(5, 213, 255, 1)",
                            shadowBlur: 4,
                            },
                        },
                    },
                    {
                        name: 'c',
                        data: [],
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        barWidth: "10",
                        itemStyle: {
                            normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                {
                                    offset: 0,
                                    color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
                                },
                                {
                                    offset: 0.98,
                                    color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
                                },
                                ],
                                false
                            ),
                            shadowColor: "rgba(5, 213, 255, 1)",
                            shadowBlur: 4,
                            },
                        },
                    }]
                }

            }
        },
        mounted(){
            this.initEchartsCountRecordCapacitys()
            this.countRecordCapacitys()
            this.initEchartsCountRecordCapacitys2()
            this.countWorkforceRecordCapacitys()

        },
        methods:{

        initEchartsCountRecordCapacitys() {
        const myChart1 = echarts.init(this.$refs.mychart1);// 图标初始化
        myChart1.setOption(this.option1);// 渲染页面
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
            myChart1.resize();
        });
        },

        countRecordCapacitys(data){
            countRecordCapacitys({
                // startTime:this.startTime,
                // endTime:this.endTime
                // startTime:this.value1[0],
                // endTime:this.value1[1]
                startTime:this.value3,
                endTime:this.value4
            }).then(resp=>{
                let data1 = resp.data
                if (data1.length > 0) {
                    for (let item of data1) {
                        this.arr1.push(item.ratio);
                        this.timeMessageCn.push(item.curDate)
                    }
                    this.option1.series[0].data=this.arr1
                    this.option1.xAxis.data=this.timeMessageCn
                    this.initEchartsCountRecordCapacitys()

                }
            }).catch(e=>{
                console.log(e)
            })
        },

        //2
        initEchartsCountRecordCapacitys2() {
            const myChart2 = echarts.init(this.$refs.mychart2);// 图标初始化
            myChart2.setOption(this.option2);// 渲染页面
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart2.resize();
            });
        },
        //这个后端返回的数据
        countWorkforceRecordCapacitys(data){
            countWorkforceRecordCapacitys({
                // startTime:this.startTime1,
                // endTime:this.endTime1
                // startTime:this.value2[0],
                // endTime:this.value2[1]
                startTime:this.value5,
                endTime:this.value6
            }).then(resp=>{
                console.log(resp,'resp')
                let data2 = resp.data
                console.log(data2,'data2')
                let data5=[]
                if (data2.length > 0) {
                        let data3=data2[0]//aa数据
                        //console.log(data3,'aa数据')
                        let data4=data2[1]//bb数据
                        if(data2.length==3){
                            data5=data2[2]//cc数据
                            this.legend1.push(data5[0].workforceLabel)
                        }
                        this.legend1.push(data3[0].workforceLabel)
                        this.legend1.push(data4[0].workforceLabel)
                        console.log(this.legend1,'len1')//这个是右上角那个标志
                        this.option2.legend.data=this.legend1
                        console.log(this.option2.legend,'this.option2.legend')
                        this.name1=this.legend1[0],
                        this.name2=this.legend1[1],
                        this.name3=this.legend1[2]
                        this.option2.series[0].name=this.name1
                        this.option2.series[1].name=this.name2
                        this.option2.series[2].name=this.name3
                        console.log(this.option2.series[0].name,this.option2.series[1].name,this.option2.series[2].name,'name111')
                        console.log(data3,data4,data5,'三个数组')

                        let arr = [{
                            // name:'A',
                            arr: data3,
                            },
                            {
                                // name: 'B',
                            arr: data4,
                            },
                            {
                            // name: 'Carr',
                            arr:data5
                            }]
                            // 使用reduce方法，两行代码搞定
                            let max = arr.reduce((prev, next) => {
                            // return prev.arr.length > next.arr.length ? prev : next
                            if( prev.arr.length > next.arr.length ? prev : next){
                                this.max= prev.arr.length > next.arr.length ? prev : next
                            }
                            return prev.arr.length > next.arr.length ? prev : next
                            })
                            console.log(max,'max');
                            for(let item of max.arr){
                                this.exceptMessageCn.push(item.currentDate)
                                console.log(this.exceptMessageCn,'this.exceptMessageCn')
                            }

                        for(let item of data3){
                            this.arr2.push(item.ratio)
                        }
                
                        this.option2.series[0].data=this.arr2
                        for(let item of data4){
                        
                            this.arr3.push(item.ratio)
                            console.log(this.arr3,'arr3')
                        }
                        this.option2.series[1].data=this.arr3
                        for(let item of data5){
                            this.arr4.push(item.ratio)
                        }
                        this.option2.xAxis.data=this.exceptMessageCn
                        this.option2.series[2].data=this.arr4
                        console.log(this.option2.xAxis.data,'xxxxxxxx')
                        console.log(this.option2.series[0].data,this.option2.series[1].data,this.option2.series[2].data,"最终数据")
                        this.initEchartsCountRecordCapacitys2()
                }
        
                
            }).catch(e=>{
                console.log(e)
            })

        }

        },
        
    }
</script>

<style scoped lang="less">
.el-col{
    color: white;
    font-size: 10px;
}
.myBig{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.myLeft1{
    position: relative;
    .mySpan1{
        position: absolute;
        left: 30px;
        top:5px
    }
}
.myLeft2{
    position: relative;
    .mySpan2{
        position: absolute;
        left: 30px;
        top:5px
    }
}

.myechartFirst1,.myechartFirst2{
    display: flex;
    justify-content: space-between;
}
/deep/.myInput1,.myInput2{
    // width: 81px;
    width: 150px;
    height: 27px;
    background: #06183D;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #749DD3;
    color: #D3E5FF;
    box-sizing: border-box;
}
.mybutton1{
    width:  81px;
    height: 27px;
    background: #06183D;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #749DD3;
    margin-left:10px;
    img{
        width: 13px;
        height: 13px;
    }
    span{
        font-size: 14px;
        font-family: SourceHanSansCN-Light, SourceHanSansCN;
        font-weight: 300;
        color: #D3E5FF;
    }
}
.mySerch{
    display: flex;
    align-items: center;
}
// /deep/.el-date-editor .el-range-separator {
//     color: #D3E5FF;
//     height: fit-content;
// }

// /deep/.el-date-editor .el-range-input::placeholder {
//     color:#D3E5FF;
//     font-size: 14px;
// }
// /deep/.el-range-editor .el-range-input{
//     background: none;
// }
// }
/deep/.el-date-editor .el-range-separator {
    color: #D3E5FF;
    height: fit-content;
}

/deep/.el-date-editor .el-range-input::placeholder {
    color:#D3E5FF;
    font-size: 14px;

}
/deep/.el-range-editor .el-range-input{
    background: none;
}
/deep/.el-input__inner {
    background: none !important;
    border-radius: 0.21333rem 0.21333rem 0.21333rem 0.21333rem !important;
    opacity: 1 !important;
    height: 0.4rem;
    /* border: 0.01333rem solid #02489E !important; */
    text-align: center;
    border: none !important;
}

/deep/.el-input__icon {
    height: 30px !important;
    display: none;
}



</style>